<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
●save()与restore()

context对象提供了保存于恢复canvas的状态函数
1：save() ：将当前canvas中的所有状态信息保存入堆
2：restore(): 该方法用于弹出并开始使用堆最上面保存的状态信息

●translate()平移
context.translate(x,y);
x: 将坐标原点向左或右移动多少个单位
y: 将坐标原点向下或上移动多少个单位

案例 1：观察原点的位置变化
<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillRect(0,0,50,50);
  ctx.translate(200,200);
  ctx.fillStyle = 'blue';
  ctx.fillRect(-100,-100,80,80);// 从（100,100）开始绘制
  var ctx2 = canvas.getContext('2d');
  ctx2.fillStyle = 'red';
  ctx2.fillRect(0,0,80,80);// 坐标轴原点已经改变（200,200）

</script>
</body>
</html>
